<!doctype html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8"/>
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
    <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
    <title>FCS智能影像存储系统</title>
    <link rel="stylesheet" th:href="@{lib/viewer/css/main.css}"/>
    <link rel="stylesheet" th:href="@{lib/viewer/css/viewer.css}"/>
    <link rel="stylesheet" th:href="@{lib/bootstrap/css/bootstrap.min.css}"/>
    <link rel="stylesheet" th:href="@{css/style.css}"/>
    <script th:src="@{lib/jquery-3.2.1.min.js}"></script>
    <script th:src="@{lib/bootstrap/js/bootstrap.min.js}"></script>
</head>
<body>
<div class="main">
    <div class="container-header" th:replace="header::header(null,null)"></div>
    <div class="container-body">
        <div class="left-content">
            <div class="left-header input-group header-bg">
                <input id="applNo" name="applNo" th:value="${applNo}" type="text"
                       class="form-control form-control-search"
                       placeholder="订单号" aria-label="订单号"/>
                <div class="input-group-append">
                    <button class="btn btn-outline-secondary btn-sm" type="button"
                            onclick="search($('#applNo').val());">查询
                    </button>
                </div>
            </div>
            <div class="left-body" th:replace="sideTree::sideTree"></div>
        </div>
        <div id="right-content" class="right-content">
            <div th:replace="mediaBody::mediaBody"></div>
        </div>
    </div>
</div>

<script type="text/javascript">
    var ch = $('.left-content').height() - $('.left-header').outerHeight();
    $('#sideTree').css({
        'height': ch + 'px'
    });

    var search = function (applNo) {
        if (applNo == "") {
            alert("请输入正确的订单号！");
            return false;
        }
        $.ajax({
            url: '/search',
            type: 'GET',
            async: true,
            data: {
                applNo: applNo
            },
            dataType: 'html',
            success: function (data) {
                $(document.body).html(data);
            }
        });
        window.history.replaceState("", null, "/search?applNo=" + applNo);
    }

</script>
</body>
</html>


